<!doctype html>
<html lang="zh-Hans-CN">

<head>
    <meta charset="utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>报名表单</title>
    <link rel="stylesheet" href="/ui/mobile/iconfont/iconfont.css">
    <link rel="stylesheet" href="/ui/mobile/css/ui.all.css"/>
    <link rel="stylesheet" href="/ui/mobile/css/style.css" type="text/css"/>
</head>

<body>
<div class="c-main">
    <!--    <header class="detail-header">-->
    <!--        <p data-name="questionTitle" class="tit"></p>-->
    <!--        <p data-name="price" class="price"></p>-->
    <!--    </header>-->
    <section class="detail-tabcont">
        <div class="bgc-fff plr10 mb10">
            <div class="detail-form-title">
                <i class="iconfont icon-yuyuexinxi"></i>
                <p>预约信息</p>
            </div>
            <div data-wrap="form"></div>
        </div>
    </section>

    <div class="fixed-bs-box">
        <div class="fixed-bs order-fixed-bot">
            <!--            <p class="bot-price">合计：<span data-name="price"></span></p>-->
            <a data-btn="submit" href="javascript:" class="f-btn btn-full">确认</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="/m/public/all.ui.js"></script>
<script src="/ui/mobile/iconfont/iconfont.js"></script>
<script src="/m/public/util.js"></script>

<!--弹出控件-->
<link rel="stylesheet" href="/ui/mobile/widget/cmarea/css/cmarea.css">
<link rel="stylesheet" href="/ui/mobile/widget/cmpick/src/cmpick.css">
<script src="/ui/mobile/widget/cmpick/src/cmpick.js"></script>

<!--查看大图-->
<link rel="stylesheet" href="/ui/mobile/widget/photoswiper/css/photoswipe.css" type="text/css"/>
<script type="text/javascript" src="/ui/mobile/widget/photoswiper/js/photoswipe.js"></script>

<!--图片上传的基本代码-->
<script src="/m/public/wxUploadFile.js"></script>

<!--微信容器-->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<!--问卷表单构建-->
<script src="/m/question/js/questionFormBuilder.js"></script>


<script type="text/javascript">
    const {questionId} = $.getPageParam();
    if (!questionId) {
        location.href = "/m/error.html?" + $.param({msg: "问卷ID不能为空", back: window.location.href});
    }

    createJsapiSignature(({Code, Message, Result: wxJsConf}) => {
        if (Code !== 10000) {
            return $.toast(Message);
        }

        wxJsConf.jsApiList = [
            'chooseImage', //选择图片
            'previewImage', //预览图片
            'uploadImage'//上传图片
        ];
        wx.config(wxJsConf);
    });

    let $form = null;

    getQuestionDetails({questionId}, ({Code, Message, Result: data}) => {
        if (Code !== 10000) {
            location.href = "/m/error.html?" + $.param({msg: Message, back: window.location.href});
        }

        const {price, questionTitle, form: rowList} = data;

        document.title = questionTitle;
        $('[data-name="questionTitle"]').text(questionTitle);
        $('[data-name="price"]').text("¥" + (price / 100).toFixed(2));

        //初始化表单
        const builder = questionFormBuilder(rowList);
        $form = builder.$form;
        $('[data-wrap="form"]').replaceWith($form);

        const $submitBtn = $('[data-btn="submit"]');
        $submitBtn.on("click", () => {

            const answerList = [];
            const data = $.getFormData($form);
            Object.keys(data).forEach(key => {
                const val = data[key];
                answerList.push({rowId: Number(key), rowValue: val});
            })

            addQuesOrder({
                questionId,
                answerJsonStr: JSON.stringify(answerList)
            }, ({Message, Code, Result: orderId}) => {
                if (Code !== 10000) {
                    return $.toast(Message);
                }

                $.toast("提交成功", 1000, () => {
                    location.href = "/m/questionOrder/orderConfirm.html?" + $.param({orderId})
                });

            });
        })
    })

    function getQuestionDetails(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/Question/getQuestionDetails"
        }, callback)
    }

    function addQuesOrder(param, callback = Function()) {
        return $.sApi({
            data: param,
            url: "/api/QuestionOrder/addQuesOrder"
        }, callback)
    }

    function createJsapiSignature(callback = Function()) {
        return $.sApi({
            data: {
                url: location.href
            },
            url: "/WxMp/createJsapiSignature"
        }, callback)
    }

</script>

</body>
</html>